<template>
  <div class="forgetPassword">
    <div class="forget-box">
      <div>手机号码 :</div>
      <div>
        <el-input
          v-model="input"
          @blur="inputJinGao5"
          placeholder="请输入你的手机号"
        ></el-input>
      </div>
      <div class="forgetYan">
        <el-input
          v-model="yanzheng"
          @input="panduan"
          @blur="yanZheng"
          placeholder="验证码"
        ></el-input>
        <el-button @click="getChecking" type="primary" :disabled="buttonDis">{{
          checking
        }}</el-button>
      </div>
    </div>

    <div class="newPassword" v-if="!buttonDis2">
      <div>
        <el-input
          placeholder="请输入新密码"
          v-model="password"
          @input="newPaw"
          show-password
        ></el-input>
      </div>
    </div>

    <div class="forgetWan">
      <el-button type="primary" @click="updatePaw" :disabled="buttonDis3"
        >完成</el-button
      >
    </div>
  </div>
</template>

<script>
import { verificationCode, updatePassword } from "../../network/login";
import { wansendEmail, isRegister } from "../../network/register";

export default {
  name: "Forget",
  data() {
    return {
      input: "",
      yanzheng: "",
      buttonDis: true,
      buttonDis2: true,
      buttonDis3: true,
      password: "",
      checking: "获取验证码",
      checkingTime: "120",
      yanzhengs: "",
    };
  },
  methods: {
    getChecking() {
      wansendEmail(this.input).then((res) => {
        console.log(res);
      });
      this.checkingFlag = setInterval(() => {
        this.checking = this.checkingTime + "s";
        this.checkingTime--;
        this.buttonDis = true;

        if (this.checkingTime == 0) {
          this.flag = clearInterval(this.checkingFlag);
          this.checking = "重新获取";
          this.checkingTime = 120;
          this.buttonDis = false;
        }
      }, 1000);
    },

    panduan() {
      verificationCode(this.yanzheng, this.input)
        .then((res) => {
          if (res.data.code == 200) {
            this.buttonDis2 = false;
            this.yanzhengs = res.data.code;
          }
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    yanZheng() {
      if (this.buttonDis2 == true && this.yanzhengs != 200) {
        this.$alert("验证码错误", "提示", {
          confirmButtonText: "确定",
        });
      }
    },

    newPaw() {
      if (this.password != null) {
        this.buttonDis3 = false;
      }
    },

    inputJinGao5() {
      let verify =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (this.input == "" || !verify.test(this.input)) {
        this.$alert("手机号码错误", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        isRegister(this.input)
          .then((res) => {
            if (res.data.data == "该手机号没有被注册") {
              this.$alert("该手机号未注册,请先继续注册", "提示", {
                confirmButtonText: "确定",
                callback: () => {
                  this.$router.push("/register");
                },
              });
            } else {
              this.buttonDis = false;
            }
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    updatePaw() {
      updatePassword(this.password, this.input)
        .then((res) => {
          this.$router.push("/login");
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.forgetPassword {
  width: 2.5rem;
  font-size: 0.13rem;
  margin: 0 auto;
  transform: translateY(50%);
}

.forget-box input {
  margin-top: 0.15rem;
}

.forgetYan {
  display: flex;
  align-items: center;
  margin-top: 0.15rem;
}

.forgetYan input {
  width: 1.5rem;
}

.forgetYan button {
  font-size: 0.1rem;
  width: 1rem;
  height: 0.27rem;
  margin-top: 0.15rem;
}

.forgetWan {
  text-align: center;
  margin-top: 0.5rem;
}

.forgetWan button {
  width: 2.5rem;
  font-size: 0.13rem;
}

.newPassword {
  margin-top: 0.5rem;
}
</style>